<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/jquery/1.2.3/jquery.min.js"></script>
  <style>
    .box{ background: mediumpurple; display: inline-block;}
  </style>
</head>
<body>
  <h3>part1 - 设置宽高为100*100</h3>
  <pre>
    第一个box 设置宽高 100
    第二个box 在第一个的基础上添加内边距 10 （padding: 10px）
    第三个box 在第二个的基础上添加边框 10 （border: 10px solid)
    第四个box 在第三个的基础上添加外边距 10 （margin: 10px)
    注：这四个盒子的box-sizing都为content-box，也是其默认值，标准盒模型
  </pre>
  <style>
    .part1 .box { width: 100px; height: 100px; }
    .part1 .box2 { padding: 10px; }
    .part1 .box3 { padding: 10px; border: 10px solid }
    .part1 .box4 { padding: 10px; border: 10px solid; margin: 10px; }
    .part1 .box5 { padding: 60px; border: 10px solid; margin: 10px; }
  </style>
  <section class="part1">
    <div class="box">$('.box').width() // 100px</div>
    <div class="box box2">+p 10 <br> $('.box2').width() // 100px</div>
    <div class="box box3">+p 10 +b 10<br> $('.box3').width() // 100px</div>
    <div class="box box4">+p 10 +b 10 +m 10<br> $('.box4').width() // 100px</div>
    <div class="box box5">+p 60 +b 10 +m 10<br> $('.box4').width() // 100px</div>
    <br>
    <pre>
      $('.part1 .box').width() // 100
      $('.part1 .box2').width() // 100
      $('.part1 .box3').width() // 100
      $('.part1 .box4').width() // 100
      $('.part1 .box5').width() // 100
    </pre>
  </section>

  <h3>part2 - 设置box-sizing 来改变他们的盒模型</h3>
  <pre>
    第一个box 设置宽高 100
    第二个box 在第一个的基础上添加内边距 10 （padding: 10px）
    第三个box 在第二个的基础上添加边框 10 （border: 10px solid)
    第四个box 在第三个的基础上添加外边距 10 （margin: 10px)
    第五个box 在第四个的基础上修改内边距 60 （padding: 60px){可以看到，实际渲染的宽度是超过了之前设定的宽度值}
  </pre>
  <style>
    .part2 .box {box-sizing: border-box;  width: 100px; height: 100px;}
    .part2 .box2 { padding: 10px; }
    .part2 .box3 { padding: 10px; border: 10px solid }
    .part2 .box4 { padding: 10px; border: 10px solid; margin: 10px; }
    .part2 .box5 { padding: 60px; border: 10px solid; margin: 10px; }
  </style>
  <section class="part2">
    <div class="box">$('.box').width() // 100px</div>
    <div class="box box2">+p 10 <br> ('.box2').width() // 80px</div>
    <div class="box box3">+p 10 +b 10<br> ('.box3').width() // 60px</div>
    <div class="box box4">+p 10 +b 10 +m 10<br> ('.box4').width() // 60px</div>
    <div class="box box5">+p 60 +b 10 +m 10<br> ('.box5').width() // 0px</div>
    <br>
    <pre>
      $('.part2 .box').width() // 100px
      $('.part2 .box2').width() // 80px
      $('.part2 .box3').width() // 60px
      $('.part2 .box4').width() // 60px
      // 上面四个，用getComputedStyle 来获取width属性的话，得到的值为100px
      getComputedStyle(document.querySelector('.part2 .box2')).width
      $('.part2 .box5').width() // 0px
      // box5 获取到的宽度为140px
      getComputedStyle(document.querySelector('.part2 .box5')).width

      // padding 60px 已经超过之前css样式设定的width 100px，所以 该盒子的渲染宽度为 60*2+10*2 = 140
    </pre>
    <h4>为什么jQuery获取到的宽度和getComputedStyle获取到的宽度不一样？</h4>
    <pre>
      看jquery源码，发现jquery是获取元素的offsetWidth，且是减去 broder 和 padding 的
      offsetWidth 包含边框、水平内边距、[竖直方向滚动条（scrollbar）、]以及css设置的(width)的值
      // 不是很理解 如果按mdn来解释，那box5的宽度就是 100 + 60*2 + 10*2
      <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetWidth">HTMLElement.offsetWidth</a>
    </pre>
  </section>

</body>
</html>